<template>
	<div class="recommend">
		<!-- <div class="slider">
			<mt-swipe>
				<mt-swipe-item v-for="(item,index) in slider" :key="index">
					<a :href="item.linkUrl"><img :src="item.picUrl"></a>
				</mt-swipe-item>
			</mt-swipe>
		</div> -->
		<div class="search">
			<el-container>
				<el-main>
					<div>
						<span>资源类型：</span>
						<span class="search-item" v-for="(item,index) in searchSourceList">
							<span>{{item.name}}</span>
						</span>
						<hr>
					</div>
					<div>
						<span>所属行业：</span>
						<span class="search-item" v-for="(item,index) in searchIndustryList">
							<span>{{item.name}}</span>
						</span>
						<hr>
					</div>
					<div>
						<span>解决方案：</span>
						<span class="search-item" v-for="(item,index) in searchSourceList">
							<span>{{item.name}}</span>
						</span>
						<hr>
					</div>										
				</el-main>
			</el-container>
		</div>
		<div class="list-tab">
			<div class="list-tab-left">
				<el-radio-group v-model="radio" @change="changeRadio">
					<el-radio-button label="最新"></el-radio-button>
					<el-radio-button label="最热"></el-radio-button>
				  </el-radio-group>
			</div>
			<div class="list-tab-right">
				<el-input
					style="width: 200px;height: auto;"
					placeholder="请输入名称/关键字"
					v-model="inputValue">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>	
			</div>
		</div>
		<div class="shopList">
			<div class="radio-list" v-if='listSwitch'>
				<ul>
					<li v-for="(item,index) in radioList">
						<div class="item-title">
							<div>{{item.Ftitle}}</div>
						</div>
						<div class="item-img" @click="selectRadio(index)">
							<img :src="item.picUrl" alt="business" >	
							<!-- {{item.picUrl}}					 -->
							<!-- <i class="radio-play" :class="radioplayIcon(index)" v-show="radioList.length"></i> -->
						</div>
						<div class="item-info">
							<p><span class="info-titles">类型：</span>{{item.type}}</p>
							<p><span class="info-titles">所属行业：</span>{{item.industry}}</p>
							<p><span class="info-titles">解决方案：</span>{{item.solution}}</p>
							<p><span class="info-titles">上传时间：</span>{{item.time}}</p>
							<p>
								<span class="eyes"><i class="el-icon-view"></i></span> <span>{{item.radioid}}</span>次
								<span class="interval"></span>
								<span class="eyes"><i class="el-icon-download"></i></span> <span>{{item.downloads}}</span>次
							</p>						
						</div>
					</li>
				</ul> 		
			</div>
			<div class="radio-list" v-if='!listSwitch'>
				<ul>
					<li v-for="(item,index) in radioList">
						<div class="item-title">
							<div>{{item.Ftitle}}</div>
						</div>
						<div class="item-img" @click="selectRadio(index)">
							<img :src="item.picUrl">						
							<!-- <i class="radio-play" :class="radioplayIcon(index)" v-show="radioList.length"></i> -->
						</div>
						<div class="item-info">
							<p><span class="info-titles">最热类型：</span><span>{{item.type}}</span></p>
							<p><span class="info-titles">所属行业：</span>{{item.industry}}</p>
							<p><span class="info-titles">解决方案：</span>{{item.solution}}</p>
							<p><span class="info-titles">上传时间：</span>{{item.time}}</p>
							<p>
								<span class="eyes"><i class="el-icon-view"></i></span> <span>{{item.radioid}}</span>次
								<span class="interval"></span>
								<span class="eyes"><i class="el-icon-download"></i></span> <span>{{item.downloads}}</span>次
							</p>						
						</div>
					</li>
				</ul> 		
			</div>			
		</div>
		<div class="pagination">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page.sync="currentPage"
			  :page-size="100"
			  layout="total, prev, pager, next"
			  :total="1000">
			</el-pagination>
		</div>			
		<router-view></router-view>
	</div>
</template>
<script>
	import { getRecommendData } from '@/api/getRecommendData.js'
	import { getToplist } from '@/api/getToplistsData.js'
	import { createSong } from '@/assets/js/song'
	import { mapState,mapGetters,mapMutations,mapActions  } from 'vuex'

	export default {
		data(){
			return {
				slider:[],
				radioList:[
					{
						Ftitle: "智慧展厅宣传视频",
						picUrl: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2303152567,1009810416&fm=26&gp=0.jpg",
						radioid: 307,
						downloads: 23,
						type: '视频',
						industry: '宣传',
						solution: '顶设咨询服务',
						time: '2021/06/01',
					},
					{
						Ftitle: "智慧城市ppt",
						picUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2876934610,3340967076&fm=26&gp=0.jpg",
						radioid: 197,
						downloads: 23,
						type: '视频',
						industry: '宣传',
						solution: '顶设咨询服务',
						time: '2021/01/01',
					},
					{
						Ftitle: "智慧展厅宣传视频",
						picUrl: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2458144752,2706490491&fm=26&gp=0.jpg",
						radioid: 345,
						downloads: 23,
						type: '视频',
						industry: '宣传',
						solution: '落地项目',
						time: '2021/06/07',
					},
					{
						Ftitle: "金融系统解决方案",
						picUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2876934610,3340967076&fm=26&gp=0.jpg",
						radioid: 190,
						downloads: 2,
						type: '图片',
						industry: '物联网',
						solution: '落地项目',
						time: '2021/02/01',
					},
					{
						Ftitle: "A园区环境展示",
						picUrl: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1210676241,3231448749&fm=26&gp=0.jpg",
						radioid: 112,
						downloads: 3,
						type: 'ppt',
						industry: '宣传',
						solution: '顶设咨询服务',
						time: '2021/06/12',
					},
					{
						Ftitle: "金融系统解决方案",
						picUrl: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2458144752,2706490491&fm=26&gp=0.jpg",
						radioid: 140,
						downloads: 13,
						type: '图片',
						industry: '物联网',
						solution: '落地项目',
						time: '2021/06/10',
					},
					{
						Ftitle: "智慧城市ppt",
						picUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2876934610,3340967076&fm=26&gp=0.jpg",
						radioid: 192,
						downloads: 38,
						type: '视频',
						industry: '宣传',
						solution: '顶设咨询服务',
						time: '2021/03/14',
					},
					{
						Ftitle: "全屋互联解决方案",
						picUrl: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1386357243,3333268607&fm=26&gp=0.jpg",
						radioid: 140,
						downloads: 20,
						type: 'ppt',
						industry: '宣传',
						solution: '顶设咨询服务',
						time: '2021/01/02',
					}
				],
				songList:[],
				radioSongs:[],
				radioplay:-1,
				searchSourceList:[{name:"全部"},{name:'图片'},{name:'ppt'},{name:'视频'},{name:'AR'},{name:'VR'},{name:'行业可视化系统'}],
				searchIndustryList:[{name:"全部"},{name:'互联网'},{name:'金融'},{name:'5G分屏'},{name:'信息化分屏'},{name:'宣传'},{name:'惠民应用'}],
				radio: '最新',
				inputValue:'',
				listSwitch: true,
				currentPage: 2
			}
		},
		computed:{
			...mapState([
				'playing',
			]),
		},
		created(){
			this._getRecommendData();
		},
		methods:{
			...mapActions([
				'selectPlay'
			]),
			...mapMutations([
				'setPlaylist',
				'setPlayingState',
				'setCurrentIndex',
			]),
			_getRecommendData(){
				getRecommendData().then((res)=>{
					let data=res.data;
					this.slider=data.slider;
					// this.radioList=data.radioList;
					this.songList=data.songList;
				})
				getToplist(26).then((res)=>{
					for(let i=0;i<30;i++){
						this.radioSongs.push(createSong(res.songlist[i].data))
					}
				})
			},
			selectRadio(index){
				//歌单数据被腾讯限制，用toplist数据模拟
				// this.radioplay = index 
				// let songs=[]
				// index ===0 ? songs = this.radioSongs.slice(0,15) : songs = this.radioSongs.slice(15,30)
				// this.selectPlay({
				// 	list:songs,
				// 	index:0
				// })
				this.$router.push({  //核心语句
					path:'/detail',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						id:'ppt' , 
					}
				})				
			},
			radioplayIcon(index) {
				if ( this.radioplay === index) {
					return this.playing ? 'radio-playing' : 'radio-pause'
				}
			},
			changeRadio (){
				this.listSwitch = !this.listSwitch;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}	
	}
</script>
<style scoped>
	ul{
		/* display: inline-block; */
		display: flex;
		justify-content: flex-start;
		flex-flow: wrap;		
		/* flex-wrap: wrap;
		justify-content: space-between; */
	}
	.item-title{
		font-size: 16px;
		color: #222;
		margin: 15px 0;
		font-weight: 700;
	}
	.item-info{
		width: 77%;
		margin: 20px auto;
		text-align: left;		
	}
	li{
		width: 17%;
		border: 1px solid #dddddd;
		margin: 17px 19px;
		transition: .5s all;
		box-shadow: 0 15px 30px rgba(0, 0, 0, .1);	
		color: #666;
	}
	li:hover {
		transition: .5s all;
		box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
		cursor: pointer;
		transform: scale(1.08);
		-ms-transform:scale(1.08);     /* IE 9 */
		-moz-transform:scale(1.08);     /* Firefox */
		-webkit-transform:scale(1.08); /* Safari 和 Chrome */
		-o-transform:scale(1.08);		
	}
	.search-item{
		margin: 5px 20px;
	}
	.el-main {
		display: block;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		overflow: auto;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #f1f1f1;
		padding: 20px;
	}
	.interval{
		margin-left: 15px;
	}
	.pagination{
		margin: 30px 0 10px 20px;
	}	
	.list-tab{
		margin: 20px 0;
	}
	.list-tab-left{
		float: left;
		clear:both;
	}
	.list-tab-right{
		position: absolute;
   	 	right: 195px;
	}
	.recommend{
		/*background-color: #f4f4f4;*/
		width: 80%;
		margin: 0 auto;
		margin-bottom: 80px;
		margin-top: 50px;
	}
	.slider{
		width: 100%;
		height: 150px;
	}
	.slider a{
		display: block;
	}
	.slider img{
		width: 100%;
		height: 150px;
	}
	.radio-list{
		/*background-color: #fff;*/
		min-height: 250px;
		text-align: center;
		margin-top: 100px;
	}
	.title{
		padding: 10px 0 5px 10px;
		font-size: 16px;
		color: #000;
		text-align: left;
	}
	.media-img{
		position: relative;
	}
	.radio-list .radio-play{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 48px;
		height: 48px;
		transform: translate(-50%,-50%);
		background-image: url('../assets/img/list_sprite.png');
	}
	.radio-list img{
		width: 80%;
		border-radius: 2%;
		height: 145px;
	}
	.radio-list p{
		margin: 10px 0;
		font-size: 14px;
	}
	.radio-list .radio-playing{
		background-position-y: -50px;
	}
	.radio-list .radio-pause{
		background-position-y: 0;
	}
	.song-list ul{
		background-color: #f4f4f4;
		padding: 0 10px;
	}
	.song-list li{
		width: 49%;
		margin-bottom: 10px;
	}
	.song-list a{
		display: block;
	}
	.song-list img{
		width: 100%;
	}
	.song-list .play{
		position: absolute;
		position: absolute;
	    right: 5px;
	    bottom: 5px;
	    width: 24px;
	    height: 24px;
	    background-image: url('../assets/img/list_sprite.png');
	    background-size: cover;
	}
	.song-list p{
		height: 55px;
		padding: 5px 0 15px 7px;
		color: #000;
		font-weight: normal;
		font-size: 14px;
		background-color: #fff;
	}
	.eyes{
		color:#02a7f0;
		font-weight: 700;
	}
	.info-titles{
		font-size: 13px;
    	font-weight: 700;
	}
</style>
